import React, { useEffect, useState } from 'react'
import '../Mine/css/mine.scss'
import { useNavigate } from 'react-router-dom'
import { getUser } from '../../request/instance'
import './css/icon.scss'
function Mine() {
    const navigate = useNavigate()
    const [user, setUser] = useState({}) // 获取的用户数据

    
    const getUserInfo = async () => {
        const { data: { data } } = await getUser()
        setUser(data[0])
    }

    useEffect(() => {
        getUserInfo()
    }, [])
    return (
        <div className='mine'>
            <div className="personal">
                <span className='img' onClick={() => { navigate('/personal', { state: user }) }}
                    style={{ backgroundImage: `url(${user.picture})` }}
                >   
                    <span>{user.petname}</span>
                </span>
                <span className='message' onClick={() => { navigate('/message') }}><span className='iconfont icon-xiaoxi'></span></span>
                <div className='infomation'>
                    <div className="wallet" onClick={() => { navigate(`/wallet/${user._id}`, { state: user }) }}>
                        <p>我的钱包</p>
                    </div>
                    <div className="collect" onClick={() => { navigate('/collect') }}>
                        <p>我的收藏</p>
                    </div>
                    <div>
                        <p>我的积分</p>
                    </div>
                    <div>
                        <p>我的签到</p>
                    </div>
                </div>


            </div>
            <div className="orderform">
                <div className="top" >
                    <span>商城订单</span>
                    <span onClick={() => { navigate(`/orderform?cate=0`) }}>查看全部订单</span>
                </div>
                <div className="order">
                    <span onClick={() => { navigate('/orderform?cate=1') }}>
                        <font className='iconfont icon-daizhifudingdan'></font>
                        <font>待付款</font>
                    </span>
                    <span onClick={() => { navigate('/orderform?cate=2') }}>
                        <font className='iconfont icon-daifahuodingdan'></font>
                        <font>待发货</font>
                    </span>
                    <span onClick={() => { navigate('/orderform?cate=3') }}>
                        <font className='iconfont icon-daishouhuo'></font>
                        <font>待收货</font>
                    </span>
                    <span onClick={() => { navigate('/orderform?cate=4') }}>
                        <font className='iconfont icon-servicewuyoutuihuanhuo'></font>
                        <font>退/换货</font>
                    </span>
                </div>
            </div>
            <div className="service">
                <div className="discount" onClick={() => { navigate('/discount') }}>
                    <p>
                        <span className='iconfont icon-youhuijuan'></span>
                        优惠券
                    </p>
                </div>
                <div className="harvest" onClick={() => { navigate(`/harvest`) }}>

                    <p>
                        <span className='iconfont icon-dizhi'></span>
                        收货地址
                    </p>
                </div>
                <div className="account" onClick={() => { navigate('/account',{state:{user:user}}) }}>

                    <p>
                        <span className='iconfont icon-zhanghuanquan'></span>
                        账号与安全
                    </p>
                </div>
                <div className="system" onClick={() => { navigate('/system') }}>

                    <p>
                        <span className='iconfont icon-xitongshezhi'></span>
                        系统设置
                    </p>
                </div>
                <div className="about">

                    <p>
                        <span className='iconfont icon-icon'></span>
                        服务热线
                    </p>
                </div>
            </div>

        </div>
    )
}
export default Mine
